<template>
	<div class="service-content">
		<el-card style="margin-bottom: 16px" v-if="accountlist.length>1">
		    <div class="select-boxt flex-row aic" >
		        <el-select @change="selecteda" v-model="account_id" placeholder="请选择账户信息">
		            <el-option
		                    v-for="item in accountlist"
		                    :key="item.id"
		                    :label="item.username"
		                    :value="item.id">
		            </el-option>
		        </el-select>
		        <!-- 上线的时候记得删除这个tip -->
		        <div class="item" style="padding-left: 16px">这个选项要加到权限设置里面，运营专员默认显示第一个客户账户的信息，客户账户的话，就显示自己的信息
		            <span class="red">上线的时候删除这个提示</span></div>
		    </div>
		</el-card>
		
		<el-card>
			<div class="service-top flex-row">
				<div class="item">
					<!-- <el-avatar :size="80" :src="avatar">
					</el-avatar> -->
					<img :src="avatar" style="width: 80px;height: 80px;border-radius: 50%;"/>
				</div>
				<div class="item flex-column jc-center">
					<div class="title">{{username}} </div>
					<div class="name">{{username}}</div>
					
				</div>
				<!-- <el-select style="margin-top: 21px;"  @change="selecteda" v-model="account_id" placeholder="请选择账户信息"  v-if="accountlist.length>1">
				    <el-option
				            v-for="item in accountlist"
				            :key="item.id"
				            :label="item.username"
				            :value="item.id">
				    </el-option>
				</el-select> -->
			</div>
		</el-card>

		<div class="service-state flex-row jc-space-between">
			<div>服务状态：已经开通</div>
			<div>
				<span>开通服务日期：{{data_list.service_start_time_text}}</span>
				<span>服务截至日期：{{data_list.service_end_time_text}}</span>
				<span>服务剩余天数：<b class="red">{{data_list.remaining_service_days}}天</b></span>
			</div>
		</div>

		<el-row style="margin-bottom: 12px">
			<el-col :span="5">
				<div class="grid-content flex-row aic">
					<el-avatar :size="60" :src="require('../../assets/images/001.jpg')">
					</el-avatar>
					<span class="label">基本功能设置</span>
				</div>
			</el-col>
			<el-col :span="19">
				<div class="grid-right flex-row aic">
					<div class="item" v-for="(item,index) in basicsetup" :key="index">
						<span class="icon-span">
							<el-checkbox checked disabled :class="{'custom-disabled':item.checked}"></el-checkbox>
						</span>
						<span class="item-span">{{item.name}}</span>
					</div>
				</div>
			</el-col>
		</el-row>
		<el-row style="margin-bottom: 12px">
			<el-col :span="5">
				<div class="grid-content flex-row aic">
					<el-avatar :size="60" :src="require('../../assets/images/002.jpg')">
					</el-avatar>
					<span class="label">企业号配置</span>
				</div>
			</el-col>
			<el-col :span="19">
				<div class="grid-right flex-row aic">
					<div class="item" v-for="(item,index) in company" :key="index">
						<span class="icon-span">
							<el-checkbox checked disabled :class="{'custom-disabled':item.checked}"></el-checkbox>
						</span>
						<span class="item-span">{{item.name}}</span>
					</div>
				</div>
			</el-col>
		</el-row>
		<el-row style="margin-bottom: 12px">
			<el-col :span="5">
				<div class="grid-content flex-row aic">
					<el-avatar :size="60" :src="require('../../assets/images/003.jpg')">
					</el-avatar>
					<span class="label">广告计划配置</span>
				</div>
			</el-col>
			<el-col :span="19">
				<div class="grid-right flex-row aic">
					<div class="item" v-for="(item,index) in advertlist" :key="index">
						<span class="icon-span">
							<el-checkbox checked disabled :class="{'custom-disabled':item.checked}"></el-checkbox>
						</span>
						<span class="item-span">{{item.name}}</span>
					</div>
				</div>
			</el-col>
		</el-row>
		<el-row style="margin-bottom: 12px">
			<el-col :span="5">
				<div class="grid-content flex-row aic">
					<el-avatar :size="60" :src="require('../../assets/images/004.jpg')">
					</el-avatar>
					<span class="label">视频制作</span>
				</div>
			</el-col>
			<el-col :span="19">
				<div class="grid-right flex-row aic">
					<div class="item" v-for="(item,index) in videomake" :key="index">
						<span class="icon-span">
							<el-checkbox checked disabled :class="{'custom-disabled':item.checked}"></el-checkbox>
						</span>
						<span class="item-span">{{item.name}}</span>
					</div>
				</div>
			</el-col>
		</el-row>
		<el-row style="margin-bottom: 12px">
			<el-col :span="5">
				<div class="grid-content flex-row aic">
					<el-avatar :size="60" :src="require('../../assets/images/005.jpg')">
					</el-avatar>
					<span class="label">智能客服系统</span>
				</div>
			</el-col>
			<el-col :span="19">
				<div class="grid-right flex-row aic">
					<div class="item" v-for="(item,index) in servicesys" :key="index">
						<span class="icon-span">
							<el-checkbox checked disabled :class="{'custom-disabled':item.checked}"></el-checkbox>
						</span>
						<span class="item-span">{{item.name}}</span>
					</div>
				</div>
			</el-col>
		</el-row>
		<el-row style="margin-bottom: 12px">
			<el-col :span="5">
				<div class="grid-content flex-row aic">
					<el-avatar :size="60" :src="require('../../assets/images/006.jpg')">
					</el-avatar>
					<span class="label">日常服务</span>
				</div>
			</el-col>
			<el-col :span="19">
				<div class="grid-right flex-row  jc-space-between aic" style="padding-left: 16px;">
					<span class="item-span">视频播放量：{{data_list.video_playback_volume}}</span>
					<span class="item-span">粉丝：{{data_list.fans_number}}</span>
					<span class="item-span">点赞：{{data_list.praise_quantity}}</span>
					<span class="item-span">私信跟进：{{data_list.private_letter_number}}</span>
					<span class="item-span">意向用户：{{data_list.number_of_intended_users}}</span>
					<span class="item-span" v-if="get_rules('服务内容提交')">
						<el-button type="text" icon="el-icon-more" @click="$router.push({ path:'/service-content-setting'})">点击查看更多数据</el-button>
					</span>
				</div>
			</el-col>
		</el-row>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				basicsetup: [],
				advertlist: [],
				videomake: [],
				servicesys: [],
				 accountlist: [],
				company: [],
				account_id:0,
				data_list: {},
				username:'',
				avatar:'',

			}
		},
		mounted() {
			this.$http.post("common/users").then((response) => {
			    console.log(response.data);
			    if (response.data.records.length > 0){ 
			        this.accountlist=response.data.records;
			        this.account_id = this.accountlist[0].id;
			        this.username = this.accountlist[0].username;
			        this.avatar = this.accountlist[0].avatar;
			        this.get_info();
			    }
			});
			//this.get_info();
		},
		methods: {
			/**
			 * @param startDate  开始日期 yyyy-MM-dd
			 * @param enDate  结束日期 yyyy-MM-dd
			 * @returns {number} 两日期相差的天数
			 */
			 getDaysBetween(startDate, enDate) {
			  const sDate = Date.parse(startDate)
			  const eDate = Date.parse(enDate)
			  if (sDate > eDate) {
			    return 0
			  }
			  if (sDate === eDate) {
			    return 1
			  }
			  const days = (eDate - sDate) / (1 * 24 * 60 * 60 * 1000)
			  return days
			},
			 getNowFormatDate() {
			        var date = new Date();
			        var seperator1 = "-";
			        var year = date.getFullYear();
			        var month = date.getMonth() + 1;
			        var strDate = date.getDate();
			        if (month >= 1 && month <= 9) {
			            month = "0" + month;
			        }
			        if (strDate >= 0 && strDate <= 9) {
			            strDate = "0" + strDate;
			        }
			        var currentdate = year + seperator1 + month + seperator1 + strDate;
			        return currentdate;
			    },
			selecteda(id) {
				var thsa=this;
				this.accountlist.map(itme=>{
					if(itme.id==id){
						thsa.username = itme.username;
						thsa.avatar = itme.avatar;
					}
				})
				console.log(thsa.avatar)
			    this.account_id = id;
			    this.get_info();
			},
			get_info() {
				this.$http.post("Servicecontentset/lists",{customer_uid:this.account_id}).then((response) => {
					if (response.data.total > 0) {
						this.data_list = response.data.records[0];
						this.data_list.remaining_service_days=Math.ceil(this.getDaysBetween(this.getNowFormatDate(),this.data_list.service_end_time_text))

						this.company = [{
								checked: this.data_list.is_merchant_page_construction == '1',
								name: '商家页搭建'
							}, {
								checked: this.data_list.is_merchant_page_products == '1',
								name: '商家页产品/服务页搭建'
							}, {
								checked: this.data_list.is_business_activities == '1',
								name: '商家页店铺活动搭建'
							}, {
								checked: this.data_list.is_merchant_information == '1',
								name: '商家页基础信息搭建'
							}, {
								checked: this.data_list.is_merchant_atlas == '1',
								name: '商家页企业图册搭建'
							}, {
								checked: this.data_list.is_business_advantage == '1',
								name: '商家页企业优势板块搭建'
							}],
							this.basicsetup = [{
								checked: this.data_list.is_nickname == '1',
								name: '昵称设置'
							}, {
								checked: this.data_list.is_logo == '1',
								name: '头像LOGO'
							}, {
								checked: this.data_list.is_custom_header == '1',
								name: '自定义图片'
							}, {
								checked: this.data_list.is_company_profile == '1',
								name: '公司简介'
							}, {
								checked: this.data_list.is_home_page_link == '1',
								name: '主页链接'
							}, {
								checked: this.data_list.is_open_blue_v == '1',
								name: '开通蓝V'
							}, {
								checked: this.data_list.is_telephone_components == '1',
								name: '电话组件'
							}, {
								checked: this.data_list.is_address_setting == '1',
								name: '地址设置'
							}, {
								checked: this.data_list.is_open_release_account == '1',
								name: '开通投放账户'
							}];
							this.advertlist=[{
							    checked: this.data_list.is_ad_account == '1',
							    name: '广告账户搭建'
							}, {
							    checked: this.data_list.is_launch_plan == '1',
							    name: '投放计划搭建'
							}, {
							    checked: this.data_list.is_launch_data == '1',
							    name: '投放数据对接'
							}];
						 	this.videomake= [{
							    checked: this.data_list.number_of_completed_videos=='1',
							    name: '视频制作完成'
							}]; 
							this.servicesys= [{
							    checked: this.data_list.is_like_auto == '1',
							    name: '用户点赞自动接待'
							}, {
							    checked: this.data_list.is_comment_auto == '1',
							    name: '用户评论自动接待'
							}, {
							    checked: this.data_list.is_auto_focus == '1',
							    name: '用户关注自动回复'
							}, {
							    checked: this.data_list.is_cancel_auto_reply == '1',
							    name: '用户取消关注自动回复'
							}];
					}

				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.service-content {
		padding: 16px;
		background-color: #ffffff;

		.service-top {

			.item {
				margin-right: 20px;
				letter-spacing: 2px;

				.title {
					font-size: 18px;
					font-weight: bold;
				}

				.name {
					font-size: 14px;
				}
			}
		}

		.service-state {
			margin-top: 16px;
			margin-bottom: 16px;
			line-height: 48px;
			background-color: #6293F9;
			padding-left: 16px;
			color: #F5F8FF;
			border-radius: 5px;

			span {
				padding-right: 24px;
				font-size: 15px;
			}
		}

		.grid-content {
			padding: 12px 0;

			.label {
				color: #409EFF;
				font-size: 16px;
				font-weight: bold;
				letter-spacing: 1px;
				padding-left: 16px;
			}
		}

		.grid-right {
			background-color: #EEF2FD;
			height: 84px;
			position: relative;

			&::before {
				// 三角形
				position: absolute;
				width: 0;
				height: 0;
				content: '';
				border-width: 10px;
				border-style: solid;
				border-color: transparent #EEF2FD transparent transparent;
				left: -20px;
				top: 50%;
				transform: translateY(-50%);
			}

			.icon-span {
				margin-left: 16px;
				margin-right: 5px;
			}

			.item-span {
				font-size: 14px;
				color: #313033;
				letter-spacing: 1px;
				padding-right: 16px;
				font-weight: bold;
			}

			.custom-disabled {

				/deep/ .el-checkbox__input.is-checked .el-checkbox__inner,
				.el-checkbox__input.is-indeterminate .el-checkbox__inner {
					background-color: #32CD32 !important;
					border-color: #32CD32 !important;
					color: #ffffff !important;

					&::after {
						border-color: #ffffff !important;
					}
				}
			}
		}
	}
</style>
